<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="方案管理">
<style>
    .button-large {
        font-size: 16px;
    }

    .webuploader-pick {
        background: none;
        padding: 0;
    }

    input.calendar {
        width: 160px;
    }
</style>
<div class="xm-product">
    <div class="row">
        <div class="panel">
            <div class="panel-header">
                <a href="${basepath}/rest/manage/plan/toList">返回上一级</a>
            </div>
            <div class="panel-body">
                <form id="addForm" class="form-horizontal" action="${basepath}/rest/manage/plan/insertJson" method="post">
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            方案名称：
                        </label>
                        <div class="controls">
                            <input type="text" class="control-text span-width span8" name="name" placeholder="请输入名称"
                                   data-rules="{required : true}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            方案分类：
                        </label>
                        <div class="controls">
                            <select name="categoryID" class="category select-box pull-left" data-rules="{required : true}">
                                <option value="">请选择分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            方案简介：
                        </label>
                        <div class="controls  control-row-auto">
                            <textarea name="introduce"  class="control-row4 input-large" data-rules="{required : true}" placeholder="请输入内容"></textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            首页头图：
                        </label>
                        <div class="controls">
                            <input type="text" class="input-normal control-text " name="icon"
                                   data-rules="{required : true}" readonly style="width: 280px;">
                            <div class="pull-right">
                                <a id="icon" class="button button-min button-primary "
                                   style="height:20px;margin-left: 10px;">上传</a>
                                <span style="padding: 1rem ">推荐尺寸380*230</span>
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            方案头图：
                        </label>

                        <div class="controls">
                            <input type="text" class="input-normal control-text " name="headImage"
                                   readonly style="width: 280px;">
                            <div class="pull-right">
                                <a id="headImage" class="button button-min button-primary"
                                   style="height:20px;margin-left: 10px;">上传</a>
                                <span style="padding: 1rem ">推荐尺寸1920*446</>
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            解决方案：
                        </label>

                        <div class="controls control-row12" style="height: 350px;initialFrameWidth: 100%;">
                            <textarea type="text" class="input-large ueditBox" name="content" id="slove"
                                      data-rules="{required:true}"></textarea>
                        </div>
                    </div>
                    <#--行业需求-->
                    <h3 class="offset2"> 行业需求:
                        <a class="button button-primary pull-right" onclick="addReq()" style="height:20px">新增</a>
                    </h3><hr>
                    <input type="hidden" class="input-normal control-text" name="professionImage"
                           data-rules="{required : true}"/>
                    <input type="hidden" class="input-normal control-text" name="professionName"/>
                    <input type="hidden" class="input-normal control-text" name="firstProfessionContent"/>
                    <input type="hidden" class="input-normal control-text" name="secondProfessionContent"/>
                    <input type="hidden" class="input-normal control-text" name="thirdProfessionContent"/>
                    <div id="reqGrid" class="xm-grid"></div>
                <#--行业需求-->
                    <h3 class="offset2"> 适用产品推荐:
                        <a class="button button-primary pull-right" onclick="addremmend()" style="height:20px">新增</a>
                    </h3><hr>
                    <input type="hidden" class="input-normal control-text" name="productID"
                    />
                    <div id="productGrid" class="xm-grid"></div>
                    <#--客户案例图片-->
                    <h3 class="offset2"> 客户案例图片:
                        <a class="button button-primary pull-right" id="imagesBtn" style="height:20px">上传图片</a>
                    </h3><hr>
                    <input type="hidden" class="control-text span-width " name="customerImage" id="picture"
                           data-rules="{required:true}" data-messages="{required:'图片不能为空'}">
                    <div id="imagesGrid" class="xm-grid"></div>
                    <div class="centered">
                        <button type="submit" class="button  button-large  button-success">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<#-----------------------------------------------添加商品规格的弹出框------------------------------------------->
<div id="addReqContent" style="display:none;">
    <form id="addReqForm" class="form-horizontal">
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">标题名称：</label>

                <div class="controls">
                    <input type="text" class="input-normal control-text" id="name"
                           data-rules="{required : true}"/>
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label"> 图片：</label>
                <div class="controls">
                    <input type="text" id="reqPic" class="input-normal control-text "
                           data-rules="{required : true}" name="picture" readonly>
                    <a id="requestBtn" class="button button-min button-primary pull-right"
                       style="height:20px;margin-left: 10px;">上传</a>
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label">标题1：</label>
                <div class="pull-left">
                      <textarea type="text" class="input-normal"  id="title1"
                                data-rules="{required:true}"></textarea>
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label">标题2：</label>
                <div class="pull-left">
                      <textarea type="text" class="input-normal"  id="title2"
                                data-rules="{required:true}"></textarea>
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label">标题3：</label>
                <div class="pull-left">
                      <textarea type="text" class="input-normal"  id="title3"
                                data-rules="{required:true}"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<#-----------------------------------------------添加商品规格的弹出框------------------------------------------->
<#-----------------------------------------------添加商品规格的弹出框------------------------------------------->
<div id="addproductContent" style="display:none;">
    <form id="addproductForm" class="form-horizontal">
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">选择系列：</label>
                <div class="controls">
                    <select name="categoryID" class="categoryList select-box pull-left" data-rules="{required : true}">
                        <option value="">请选择分类</option>
                    </select>
                </div>
            </div>
            <div class="control-group span16">
                <label class="control-label">选择产品：</label>
                <div class="controls">
                    <select name="categoryID" class="productList select-box pull-left" data-rules="{required : true}">
                        <option value="">请选择分类</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    var ue = UE.getEditor('slove', {

        initialFrameWidth :800,
        initialFrameHeight:200,
    });
    var Grid = BUI.Grid;
    var Store = BUI.Data.Store;
    var addForm = new BUI.Form.Form({
        srcNode: '#addForm',
        submitType: 'ajax',
        callback: function (data) {
            if (addForm.isValid()) {
                if (data.success) {
                    window.location.href = "${basepath}/rest/manage/plan/toList";
                } else {

                }
            } else {
                addForm.valid();
            }
        }
    }).render();
    /*--------------------------活动图片列表  begin--------------------*/
    /**
     * 图片信息
     * @type {*[]}
     */
    var imagesColumns = [
        {title: '序号',dataIndex: 'id', elCls: 'center', width: '30%', renderer: function (value, data, index) {
                return (index + 1);}
        },
        {title: '图片', dataIndex: 'url', elCls: 'center', width: '30%', renderer: function (data) {
                return '<img src="${basepath}/' + data + '" width="100px" height="100px"/>'}
        },
        {title: '操作', dataIndex: 'title', elCls: 'center', width: '40%', renderer: function (data, obj, index) {
                return '<a href="javascript:delImages(' + index + ')">删除</a>';}
        }
    ];

    /**
     * 删除缓存图片信息
     * @param index
     */
    function delImages(index) {
        BUI.Message.Confirm('确认要删除吗？', function () {
            var record = imagesStore.findByIndex(index);
            imagesStore.remove(record);
            var imgStr = imagesStore.getResult();
            var imgArr = new Array();
            for (var i = 0; i < imgStr.length; i++) {
                imgArr[i] = imgStr[i].url
            }
            $("#picture").val(imgArr.join(","));
        }, 'question');
    }

    var imagesStore = new Store({});
    var imagesGrid = new Grid.Grid({
        render: '#imagesGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: imagesColumns,
        idField: 'title',
        store: imagesStore
    });
    imagesGrid.render();
    var uploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',//绑定事件
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });

    //上传成功后
    uploader.on('uploadSuccess', function (file, response) {
        uploader.removeFile(file);//删除缓存
        imagesStore.add(response);//给store赋值
        var imgStr = imagesStore.getResult();
        //将数据源store转化成字符串赋值给input
        var imgArr = new Array();               //图片保存到数组中
        for (var i = 0; i < imgStr.length; i++) {
            imgArr[i] = imgStr[i].url;
        }
        $("#picture").val(imgArr.join(","));
    });
    /*------------------------店铺头像上传插件配置  begin-----------------------*/
    //商品主图上传
    var pictureUploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#icon',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    //获取一张主图并传入url
    pictureUploader.on('uploadSuccess', function (file, response) {
        pictureUploader.removeFile(file);
        addForm.setFieldValue("icon",  response.url)
    });
    //商品主图上传
    var backUploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#headImage',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    //获取一张主图并传入url
    backUploader.on('uploadSuccess', function (file, response) {
        backUploader.removeFile(file);
        addForm.setFieldValue("headImage", response.url)
    });
    /*------------------------店铺头像上传插件配置  -----------------------*/
    /*--------------------------产品规格列表  begin--------------------*/
    /**
     * 规格信息
     * @type {*[]}
     */
    var reqColumns = [
        {title: '序号',dataIndex: 'id', elCls: 'center', width: '30%', renderer: function (value, data, index) {
                return (index + 1);}
        },
        {title: '名称', dataIndex: 'name', width: '25%', elCls: "center"},
        {
            title: '图片', dataIndex: 'picture', elCls: "center", width: '25%', renderer: function (data) {
                return '<img src="${basepath}/' + data + '" width="100px" height="100px"/>'
            }
        },
        {title: '操作', dataIndex: 'id',width: '25%', elCls: "center", renderer: function (value) {
                return '<a href="javascript:delSpec(' + value + ')">删除</a>';
            }
        }
    ];
    var reqStore = new Store({});
    var reqGrid = new Grid.Grid({
        render: '#reqGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: reqColumns,
        store: reqStore
    });
    reqGrid.render();
    /**
     * 删除规格信息--不是放在数据库中，而是显示在列表上的用bui的remove实现
     * @param index
     */
    function delSpec(index) {
        var record = reqStore.find('id',index);
        reqStore.remove(record);
        var pictures = [],title1s = [], title2s = [],title3s=[];
        var datas = reqStore.getResult();
        for (var i = 0; i < datas.length; i++) {
            names[i] = datas[i].professionName;
            pictures[i] = datas[i].professionImage;
            title1s[i] = datas[i].firstProfessionContent;
            title2s[i] = datas[i].secondProfessionContent;
            title3s[i] = datas[i].thirdProfessionContent;
        }
        $("input[name='professionName']").val(names.join(";"));
        $("input[name='professionImage']").val(pictures.join(","));
        $("input[name='firstProfessionContent']").val(title1s.join(";"));
        $("input[name='secondProfessionContent']").val(title2s.join(";"));
        $("input[name='thirdProfessionContent']").val(title3s.join(";"));
    }
    /*--------------------------添加商品规格方法 begin---------------------------------*/
    var datas = reqStore.getResult();
    //新增商品规格--先存入表单中，不直接存入数据库
    function upReq() {
        var data = {
            "name": $('#name').val(),
            "picture": $('#reqPic').val(),
            "title1": $('#title1').val(),
            "title2": $('#title2').val(),
            "title3": $('#title3').val()
        };
        reqStore.add(data);
        var names = [],
                pictures = [],
                title1s = [],
                title2s = [],
                title3s=[];
        for (var i = 0; i < datas.length; i++) {
            names[i] = datas[i].name;
            pictures[i] = datas[i].picture;
            title1s[i] = datas[i].title1;
            title2s[i] = datas[i].title2;
            title3s[i] = datas[i].title3;
        }
        $("input[name='professionName']").val(names.join(";"));
        $("input[name='professionImage']").val(pictures.join(","));
        $("input[name='firstProfessionContent']").val(title1s.join(";"));
        $("input[name='secondProfessionContent']").val(title2s.join(";"));
        $("input[name='thirdProfessionContent']").val(title3s.join(";"));
    }
    /*--------------------------添加商品规格方法 end---------------------------------*/

    /*----------------------------------------------新增规格表单处理 begin------------------------------------*/
    var addReqForm = new BUI.Form.Form({
        srcNode: '#addReqForm',
        submitType: 'ajax',
        callback: function (data) {
            var obj = new Object();
            obj.start = 0; //返回第一页
            store.load(obj);
            addReqForm.close();
        }
    }).render();
    var addReqDialog = new BUI.Overlay.Dialog({
        title:'新增行业需求',
        width: 600,
        height: 400,
        contentId: 'addReqContent',
        success: function () {
            if (addReqForm.isValid()) {
                upReq();
                this.close();
            } else {
                addReqForm.valid();
            }
        }
    });
    /**
     *规格新增按钮事件
     */
    function addReq() {
        addReqForm.clearErrors();
        addReqForm.clearFields();
        addReqDialog.show();
        var reqPicUploader = WebUploader.create({
            auto: true,
            swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
            server: '${basepath}/rest/manage/ued/config?action=uploadimage',
            pick: '#requestBtn',
            resize: false,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
            }
        });
        //获取一张主图并传入url
        reqPicUploader.on('uploadSuccess', function (file, response) {
            reqPicUploader.removeFile(file);
            addReqForm.setFieldValue("picture", response.url);
        });
    }
    /*----------------------------------------------新增规格表单处理 end------------------------------------*/
    /*----------------------------------------------新增规格表单处理 begin------------------------------------*/
    /**
     * 规格信息
     * @type {*[]}
     */
    var productColumns = [
        {title: '序号',dataIndex: 'id', elCls: 'center', width: '25%', renderer: function (value, data, index) {
                return (index + 1);}
        },
        {title: '所在系列', dataIndex: 'categoryName', width: '25%', elCls: "center"},
        {title: '产品名称', dataIndex: 'name', elCls: "center", width: '25%'},
        {title: '操作', dataIndex: 'id',width: '25%', elCls: "center", renderer: function (value) {
                return '<a href="javascript:delproduct(' + value + ')">删除</a>';
            }
        }
    ];
    var productStore = new Store({});
    var productGrid = new Grid.Grid({
        render: '#productGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: productColumns,
        store: productStore
    });
    productGrid.render();
    var addproductForm = new BUI.Form.Form({
        srcNode: '#addproductForm',
        submitType: 'ajax',
        callback: function (data) {
            var obj = new Object();
            obj.start = 0; //返回第一页
            store.load(obj);
            addproductForm.close();
        }
    }).render();
    var addproductDialog = new BUI.Overlay.Dialog({
        title: '产品推荐',
        width: 400,
        height: 200,
        contentId: 'addproductContent',
        success: function () {
            if (addproductForm.isValid()) {
                upRecommend();
                this.close();
            } else {
                addproductForm.valid();
            }
        }
    });
    /**
     *规格新增按钮事件
     */
    function addremmend() {
        addproductForm.clearErrors();
        addproductForm.clearFields();
        addproductDialog.show();
    };
    var recommend = productStore.getResult();
    //新增商品规格--先存入表单中，不直接存入数据库
    function upRecommend() {
        var data = {
            "categoryName": $(".categoryList").find("option:selected").text(),
            "categoryID":$(".categoryList").val(),
            "productID": $('.productList').val(),
            "name": $(".productList").find("option:selected").text()
        };
        productStore.add(data);
             var products = [],categorys=[];
        for (var i = 0; i < recommend.length; i++) {
            products[i] = recommend[i].productID;
        }
        $("input[name='productID']").val(products.join(","));
    }
    function delproduct(index) {
        var record = productStore.find('id',index);
        productStore.remove(record);
        var datas = productStore.getResult(),products=[];
        for (var i = 0; i < datas.length; i++) {
            products[i] = datas[i].productID;
        }
        $("input[name='productID']").val(products.join(","));
    }
    (function () {
        $.ajax({
            url:'/rest/manage/plancategory/selectAllList',
            type:'GET',
            dataType:'json',
            success:function (data) {
                var list=data.data,html='';
                $.each(list,function (i, e) {
                    html+='<option value="'+e.id+'">'+e.name+'</option>'
                });
                $('.category').html(html);
            }
        })
    })();
    (function () {
        $.ajax({
            url:'/rest/manage/productcategory/selectAllList',
            type:'GET',
            dataType:'json',
            success:function (data) {
                var list=data.data,html='';
                $.each(list,function (i, e) {
                    html+='<option value="'+e.id+'">'+e.name+'</option>'
                });
                $('.categoryList').html(html);
                return  queryproduct(list[0].id)
            }
        })
    })();
function queryproduct(id) {
    $.ajax({
        url:'/rest/manage/product/selectAllList',
        type:'GET',
        data:{categoryID:id},
        dataType:'json',
        success:function (data) {
            var list=data.data,html='';
            $.each(list,function (i, e) {
                html+='<option value="'+e.id+'">'+e.name+'</option>'
            });
            $('.productList').html(html);
        }
    })
}
    $('.categoryList').change(function () {
    var id=$(this).val();
        queryproduct(id)
 });

</script>

</@page.pageBase>
